<template>
  <div class="container1">
    <div class="registerBox">
      <img src="../assets/img/register/logo.png" alt="" />
      <form>
        <!-- 用户名 -->
        <div>
          <input id="name" type="text" class="form-control input-register"
            placeholder="用户名" v-model="registerForm.name" />
        </div>
        <!-- 手机号 -->
        <div>
          <input id="phone" type="text" class="form-control input-register"
            placeholder="手机号码" v-model="registerForm.phone" />
        </div>
        <!-- 密码 -->
        <div>
          <input id="password" type="password"
            class="form-control input-register" placeholder="密码"
            v-model="registerForm.password" />
        </div>
        <!-- 确认密码 -->
        <div>
          <input id="passwordConfirm" type="password"
            class="form-control input-register" placeholder="确认密码"
            v-model="registerForm.secondPass" />
        </div>
        <el-button type="primary" :loading="isLoading" @click="register">注册并登录
        </el-button>
      </form>

      <div class="about-register">
        <router-link to="/login">已有账号去注册</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      registerForm: {
        name: "",
        phone: "",
        password: "",
        secondPass: ""
      },
      isLoading: false
    };
  },
  methods: {
    async register() {
      if (this.registerForm.password !== this.registerForm.secondPass)
        return this.$message.error("两次密码输入不一致");
      this.isLoading = true;
      let { data } = await this.$http.post(
        "/students/register",
        this.registerForm
      );
      console.log(data);
      if (data.code !== 200) {
        this.isLoading = false;
        this.$message.error(data.message);
        return;
      }
      this.$message.success(data.message);
      this.$router.push("/login");
    }
  }
};
</script>

<style lang="scss" scoped>
.container1 {
  width: 100vw;
  height: 100vh;
  background-color: #84af9b;
}
.registerBox {
  width: 390px;
  height: 650px;
  background-color: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  background-color: #fff;
  overflow: hidden;
  form {
    width: 330px;
    margin: 20px auto 0;
    > div {
      margin-bottom: 20px;
    }
    .input-register {
      width: 330px;
      height: 50px;
      padding-left: 30px;
      font-size: 16px;
    }
    button {
      width: 330px;
      height: 50px;
    }
  }
  .about-register {
    margin: 30px auto 0;
    width: 330px;
    display: flex;
    justify-content: center;
    a {
      color: #999;
    }
  }
}
</style>
